<script setup lang="ts">
const nav = ref([
  {
    icon: 'i-carbon-chat',
    label: '首页',
    value: '/main',
  },
])
const route = useRoute()
function isActive(value: string) {
  return route.path.startsWith(value)
}
</script>

<template>
  <nav class="h-full w-18 flex flex-col items-center pt-4">
    <div class="r mb-5 cursor-pointer">
      <el-image class="h-11 w-11 border rounded-full p-2" src="/logo.svg" />
    </div>
    <router-link
      v-for="(item, index) in nav"
      :key="index"
      class="my-3 flex flex-col cursor-pointer items-center gap-1 rounded p-2 text-secondary-foreground hover:bg-background/80"
      :class="{ active: isActive(item.value) }"
      :to="item.value"
    >
      <div :class="[item.icon]" />
      <div class="text-xs">
        {{ item.label }}
      </div>
    </router-link>
  </nav>
</template>

<style lang="scss" scoped>
.active {
  @apply bg-background shadow text-primary;
}
</style>
